<template>
  <main
    class="wallpaper"
    @click.left="closeBullectfun"
    @click.right="bullectfun"
    @contextmenu.prevent
    :style="{
      backgroundImage: `url(${wallpaper})`
    }"
  >
    <topbar />
    <!-- <Aside /> -->
    <Laucher @click.right.native="openLaucher" :bulletShow="laucherBuShow" />
    <BullectBox ref="buBox" :options="sunOpt" :showBox="boxShow"></BullectBox>
    <template v-for="item in apps">
      <transition
        enter-active-class="custom_duration animate__animated animate__bounceIn"
        leave-active-class="custom_duration animate__animated animate__bounceOut"
        :key="item.appId"
      >
        <Window v-if="item.open" title="test" :app="item" :visible="item.open">
          <component :is="item.compName" v-bind="compPropsMap[item.appId]"></component>
        </Window>
      </transition>
    </template>
    <!-- <login></login> -->

    <Docker></Docker>
  </main>
</template>

<script>
import Docker from "../components/dock/Dock.vue"
import Laucher from "../components/laucher/Laucher.vue"
import Window from "../components/window/Window.vue"
import topbar from "../components/topbar/index.vue"
// import Aside from "../components/aside/Aside.vue"

import BullectBox from "../components/rcbBox/bullectBox.vue"
import login from "../components/login/index.vue"
import DrawerPanel from "../components/asidePanel/DrawerPanel.vue"
import UserInfo from "../components/userInfo/index.vue"
import vscode from "./apps/Vscode.vue"
import safari from "./apps/safari.vue"
// import facetime from "./apps/facetime.vue"
import addCollect from "./apps/addCollect.vue"
import about from "./apps/about.vue"
import updateUser from "./apps/updateUser.vue"
import { AppIdEnum } from "@/constant"
import todoList from "./apps/todoList"
import wallpaper from "./apps/wallpaper.vue"
import NotePad from "./apps/NotePad.vue"
import perSaying from "./apps/perSaying/perSayingContent.vue"

import { mapActions, mapState } from "vuex"
export default {
  name: "Desktop",
  data() {
    return {
      visible: false,
      laucherBuShow: false,
      boxShow: false,
      openComps: [],
      sunOpt: [],
      compPropsMap: {}
    }
  },
  computed: {
    ...mapState(["apps", "wallpaper"])
  },
  components: {
    topbar,
    // Aside,
    BullectBox,
    addCollect,
    login,
    perSaying,
    DrawerPanel,
    Docker,
    Laucher,
    Window,
    // facetime,
    safari,
    vscode,
    UserInfo,
    about,
    todoList,
    wallpaper,
    NotePad,
    updateUser
  },
  mounted() {
    const avaScr = this
    window.onresize = () => {
      return (() => {
        avaScr.wid = document.body.clientWidth
        avaScr.Hig = document.body.clientHeight
      })()
    }

    this.restoreWallpaper()

    this.getUserInfo()
    this.getCollects()

    this.$EventBus.$on("openWindow", ({ appId, data = {} }) => {
      this.compPropsMap[appId] = data
      this.openApp(appId)
    })
  },
  destroyed() {
    this.$EventBus.$off("openWindow")
  },
  methods: {
    ...mapActions(["openApp", "getCollects", "getUserInfo", "restoreWallpaper"]),
    addCollect() {
      this.$EventBus.$emit("openWindow", {
        appId: AppIdEnum.COLLECT_MODAL
      })
    },

    bullectfun(event) {
      if (Math.abs(event.offsetY - event.clientY) < 2) {
        this.sunOpt = [
          // { id: 1, title: "刷新", action: refresh },
          {
            id: 2,
            title: "更换壁纸",
            action: () => {
              this.$EventBus.$emit("openWindow", {
                appId: AppIdEnum.WALLPAPER
              })
            }
          },
          { id: 3, title: "添加收藏", action: this.addCollect }
        ]
        let compx = event.clientX
        let compy = event.clientY
        if (event.offsetX + 13 * 16 > document.body.clientWidth) {
          compx = event.clientX - 13 * 16
        }
        if (event.offsetY + 5 * 16 > document.body.clientHeight) {
          compy = event.clientY - 5 * 16
        }
        this.boxShow = true
        this.$data.laucherBuShow = false
        this.$refs.buBox.$el.style.top = String(compy) + "px"
        this.$refs.buBox.$el.style.left = String(compx) + "px"
      } else {
        this.boxShow = false
      }
    },
    openLaucher() {
      this.laucherBuShow = true
    },
    closeBullectfun() {
      this.$data.laucherBuShow = false
      this.boxShow = false
    }
  }
}
</script>

<style lang="less" scoped>
@import "./animation.less";
.custom_duration {
  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s; /* Safari 和 Chrome */
}
.wallpaper {
  height: 100vh;
  width: 100vw;
  transition: background-image 0.5s;
  background-size: cover;
  background-position: 50%;
  // background-image: url(../assets/Monterey.jpeg);
}
</style>
